<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登陆页面</title>
		<style>
			.legend{color:black;text-align: -moz-center;font-size:1.625rem; font-weight: bold;}
			fieldset{ width: 600px;height: 240px; background:blanchedalmond;}
		</style>
		<script>
			 function $(id){document.getAnonymousElementByAttribute(id);}
			 function checkright()
			 {
				var  a=$("user").value;
				var  b=$("mypwd").value;
				var right=true;
				if(a==""||b=="")
				{
					alert("用户名和密码不得为空！");
					right=false;
				}
				else if(a.length<6||a.length>20||b.length<6||b.length>20)
				{
				    alert("用户名或密码长度不正确！\用户名和密码长度不得小于6个字符或大于20个字符！");
					right=false;
				}
				else
				{  
					alert("登陆成功！");
					right=true;
				}
				return right;
			 }
			 function clearright()
			 {
				var flag=confirm("是否确认要重置数据？")；
				 if(flag==true)
				 {
					$("user")="";
					$("mypwd")="";
					 
				 }
				 
			 }
		</script>
	</head>
	
	<body>
		<center>
         <form onsubmit="return checkright()" method="get" onreset="clearright()">
		   <fieldset>
			 <br>
			 <legend class="legend">用户登录</legend>
			 <strong>用户账号:</strong>
			 <input type="text" id="user">&nbsp;&nbsp;(确认长度在6~20字符间)<br><br>
			 <strong>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</strong>
			 <input type="password" id="mypwd">&nbsp;&nbsp;(确认长度在6~20字符间)<br><br>
			 <strong>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</strong>
			 <input type="radio" name="sex" value="male" checked="checked">男性
			 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			 <input type="radio" name="sex" value="female" checked="checked">女性
			 <br><br>
			 <input id="button" type="submit" value="提交" id="sub">&nbsp;&nbsp;&nbsp;&nbsp;
			 <input id="button"  type="reset" value="重置">
		 </form>
		   </fieldset>
		</center>	
	</body>
</html>
